<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            text-align: center;
        }
        p{
            margin: 4px 0;
        }

        #after{
            display: flex;
        }

        .at{
            border: solid 1px black;
            width: 33%;
        }

        .clearfix:after{
            content: "";
            display:block;
            clear: both;
        }

    </style>
</head>
<body>
    <!--<div id="today">
        <h1>周二 4月25日</h1>
        <p>pm2.5:106</p>
        <p>晴</p>
        <p>18~11℃</p>
        <p>东北风3-4级</p>
        <img src="">
    </div>-->

    <!--<div id="after">
        <div class="at">
            <h2>周3</h2>
            <p>阴</p>
            <p>12-19</p>
        </div>
        <div class="at"></div>
        <div class="at"></div>
    </div>-->
    <input type="text">
</body>

<script src="jquery.js"></script>

<script>

    
    var params = {
        location:"荆州",
        output:"json",
        ak:"ck6oSxPYCgGLYKc17YZXanOC",
    }
    
    $.getJSON("http://api.map.baidu.com/telematics/v3/weather?callback=?",params,function(res){
        // console.dir(res);
        render(res);
    });


    function render(data){
        var today = data.results[0].weather_data[0];
        var htmlStr = "";
        htmlStr+='<div id="today">';
        htmlStr+='<h1>'+today.date+'</h1>'
        htmlStr+='<p>pm2.5:'+data.results[0].pm25+'</p>';
        var pm = data.results[0].pm25*1;
        htmlStr+='<p>'+pm<50?'优':pm<100?'良':pm<200?'轻度污染':'严重污染'+'</p>';
        htmlStr+='<p>'+today.weather+'</p>';
        htmlStr+='<p>'+today.temperature+'</p>';
        htmlStr+='<p>'+today.wind+'</p>';
        var now = new Date();
        var h = now.getHours();
        if(h>6&&h<18){
            htmlStr+='<img src="'+today.dayPictureUrl+'">';
        }else{
            htmlStr+='<img src="'+today.nightPictureUrl+'">';
        }
        htmlStr+='</div>';


        htmlStr+='<div id="after">';
        for(var i = 1;i<data.results[0].weather_data.length;i++){
            var day = data.results[0].weather_data[i];
            htmlStr+='<div class="at">';
            htmlStr+='<h2>'+day.date+'</h2>';
            htmlStr+='<p>'+day.weather+'</p>';
            htmlStr+='<p>'+day.temperature+'</p>';
            htmlStr+='</div>';
        }
        htmlStr+='</div>';

        $("body").html(htmlStr);
    }



</script>



</html>